<template>
  <!-- 活动管理下的活动详情里的:编辑 -->
    <el-drawer
        title="活动详情编辑栏:"
        :visible.sync="drawer"
        direction="rtl"
        size="50%">
        
        <el-form :model="form" label-width="100px">
            <el-form-item label="活动名称" style="width: 60%;">
                <el-input v-model="form.active_name"></el-input>
            </el-form-item>
            <el-form-item label="活动地址" style="width: 75%;">
                <el-input v-model="form.active_address"></el-input>
            </el-form-item>
            <el-form-item label="活动申请人" style="width: 50%;">
                <el-input v-model="form.active_employee_name" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="开始时间" style="width: 50%;">
                <el-date-picker type="date" v-model="form.start_time" style="width: 50%;" :disabled="true"></el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" style="width: 50%;">
                <el-date-picker type="date" v-model="form.end_time" style="width: 50%;" :disabled="true"></el-date-picker>
            </el-form-item>
            <el-form-item label="申请时间" style="width: 50%;">
                <el-date-picker type="date" v-model="form.create_time" style="width: 50%;" :disabled="true"></el-date-picker>
            </el-form-item>
            <el-form-item label="活动状态">
                <el-button type="success" :disabled="true">{{form.status}}</el-button>
            </el-form-item>
            <el-form-item label="活动内容" style="width: 95%;">
                <el-input type="textarea" v-model="form.context" :autosize="{ minRows: 2, maxRows: 6}"></el-input>
            </el-form-item>
            <el-form-item label="活动总结" style="width: 95%;">
                <el-input type="textarea" v-model="form.summary" :autosize="{ minRows: 2, maxRows: 3}"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">修 改</el-button>
                <el-button @click="drawer=false">取 消</el-button>
            </el-form-item>
        </el-form>

    </el-drawer>

</template>

<script>
    import myAxios from '@/tools/myAxios';
    import Qs from 'qs';
    export default {
        name:'DetailActiveEdit',
        data() {
            return {
                // 抽屉的展开与关闭
                drawer:false,
                // 活动的详细数据
                form: {}
            }
        },
        watch:{
            form(){
                this.drawer = true;
            }
        },
        methods:{
            // 修改按钮
            onSubmit() {
                myAxios(
                    'http://localhost:8088/admin/updatedetailactiveinfo',
                    'post',
                    Qs.stringify(this.form),
                    (data)=>{
                        window.location.reload();
                        // 提示一下
                        this.$message({
                            message: '修改成功!',
                            type: 'success'
                        });
                    }
                )
            },
            // 详情事件的回调
            clickDetailActiveEdit(data){
                this.form = data;
            }
        },
        mounted(){
            // 绑定一个编辑的事件
            this.$bus.$on('clickDetailActiveEdit',this.clickDetailActiveEdit);
        },
        beforeDestroy(){
            // 解绑
            this.$bus.$off('clickDetailActiveEdit');
        }
    }
</script>

<style lang="less" scoped>
</style>